<template>
    <div class="clist">
        <div class="citem" v-for="(l,i) in list" :key='i'>
            <router-link :to="{
                name:'cinema-detail',
                params:{
                    cinemaId:l.cinemaId,
                    filmId:filmId,   // 可以为空 
                    date:time
                }
            }" class="aitem">
                <div class="left">
                    <div class="name">
                        {{l.name}}
                    </div>
                    <div class="address">
                        {{l.address}}
                    </div>
                </div>
                <div class="right">
                    <div class="price">
                       ¥ {{l.lowPrice / 100 }} 起
                    </div>
                    <div class="distan">
                        {{l.Distance? l.Distance.toFixed(1) +'km':'距离未知'}}
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    props:['list','time','filmId']
}
</script>

<style lang="scss" scoped>
.clist{
    width:100%;
    .citem{
        width:100%;
        height:75px;
        border-bottom:1px solid #eee;
        padding:12px;
        display: flex;
        align-items: center;
        .aitem{
            display: flex;
            justify-content: space-between;
            .left{
                flex:1;
                margin-right:10px;
                flex-shrink: 0;
                .name{
                    color: #191a1b;
                    font-size: 15px;
                    display: block;
                    overflow: hidden;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width:260px;
                }
                .address{
                    color: #797d82;
                    font-size: 12px;
                    margin-top: 5px;
                    display: block;
                    overflow: hidden;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width:270px;
                }
            }
            .right{
                width:70px;
                text-align: right;
                .price{
                    font-size: 15px;
                    color: #ff5f16;
                    height: 0!important;
                    display: inline-table!important;
                }
                .distan{
                    font-weight: 400;
                    display: block;
                    margin-top: 5px;
                    font-size: 12px;
                    color:#797d82;
                }
            }
        }
    }
}
</style>